import React, { Component } from 'react';
import { Button, Col, Icon, Row, Form, Input, Select, Table, Checkbox, Divider, Modal, message, Tag } from 'antd';
import styles from '../index.less';
import { connect } from 'dva';
import moment from 'moment';
import { getDepartment, postStaffList, getFullSync, getSyncRecords } from '@/services/user';
import RecordsModal from './recordsModal';

const { Search } = Input;
const { confirm } = Modal;

class StaffList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      queryData: {
        current: 1,
        size: 10,
        search: '',
      },
      allPage: 1,
      total: 0,
      treeData: [],
      categoryId: null,
      platformType: '',
    };
    this.columns = [
      {
        title: '员工姓名',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: '应用渠道',
        dataIndex: 'platformType',
        key: 'platformType',
        width: 100,
        render: (platformType) => {
          switch (platformType) {
            case 'FS':
              return '飞书';
            case 'DD':
              return '钉钉';
            case 'QWX':
              return '企业微信';
            default:
              return ''
          }
        }
      },
      {
        title: '部门',
        dataIndex: 'departmentName',
        key: 'departmentName',
        width: 100,
      },
      {
        title: '职位',
        dataIndex: 'position',
        key: 'position',
        width: 150,
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 120,
      },
      {
        title: '企业邮箱',
        dataIndex: 'bizEmail',
        key: 'bizEmail',
        width: 120,
      },
      {
        title: 'email',
        dataIndex: 'email',
        key: 'email',
        width: 120,
      },
      {
        title: '是否部门负责人',
        dataIndex: 'leaderInDeptVoList',
        key: 'leaderInDeptVoList',
        width: 150,
        render: leaderInDeptVoList => {
          if (leaderInDeptVoList) {
            return leaderInDeptVoList.map((item, index) => {
              return (
                <span key={index}>
                  <span>{item.name}</span>
                  <Tag
                    color={item.state == 1 ? 'rgba(50, 177, 108, 0.12)' : 'rgba(255, 85, 0, 0.12)'}
                    style={{ color: item.state == 1 ? ' #32B16C' : '#FF5500', marginLeft: 5 }}
                  >
                    {item.state == 1 ? '是' : '否'}
                  </Tag>
                  {index == leaderInDeptVoList.length - 1 ? '' : ','}
                </span>
              )
            })
          } else {
            return ''
          }
        }
      },
      {
        title: '通讯录标签',
        dataIndex: 'imTag',
        key: 'imTag',
        width: 120,
      },
    ];
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  // 处理选中后右侧展示的数据
  getSelectData(data) {
    const { queryData } = this.state;
    queryData.current = 1;
    this.setState({ categoryId: data.id, title: data.title, queryData, platformType: data.platformType }, () => {
      this.getList();
      // this.getCategoryTree();
    });
  }

  // 获取列表
  getList = async () => {
    const { queryData, categoryId, platformType } = this.state;
    const res = await postStaffList({ categoryId: categoryId, platformType, ...queryData });
    this.setState({ dataSource: res.records, total: res.total, allPage: res.pages });
  };

  // 查询
  selectData = value => {
    const { queryData } = this.state;
    queryData.current = 1;
    queryData.search = value.replace(/(^\s*)|(\s*$)/g, '');
    this.setState({ queryData }, () => this.getList());
  };

  //快速跳至某一页
  changePage = page => {
    const { queryData } = this.state;
    queryData.current = page;
    this.setState({ queryData }, () => {
      this.getList();
    });
  };

  //展示总数
  showTotal = total => {
    let allPage = this.state.allPage;
    return `共${allPage}页/${total}条数据`;
  };

  getCategoryTree = async () => {
    const { applicationId } = this.props;
    const res = await getDepartment({ applicationId });
    // console.log(res);
    this.setState({ treeData: res });
  };

  // 同步
  fullSync = async () => {
    const { applicationId } = this.props;
    const res = await getFullSync({ applicationId });
    this.props.checkSyncStatus(true)
    // if (res.code == 0) {
    //   message.info('同步成功');
    //   this.props.getList();
    // }
  }

  getSyncList = async () => {
    this.RecordsModal.openModal()
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { dataSource, total, queryData, treeData, categoryId } = this.state;

    return (
      <div className={styles.cardTab}>
        <div style={{ lineHeight: '40px', display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Input.Search placeholder="请输入员工姓名" style={{ width: '240px' }} onSearch={value => this.selectData(value)} />
          <div>
            <Button type="primary" onClick={this.fullSync} style={{ marginRight: 10 }}>同步</Button>
            <Button type="primary" onClick={this.getSyncList} ghost>同步记录</Button>
          </div>
        </div>
        <Table
          dataSource={dataSource}
          columns={this.columns}
          rowKey={'id'}
          scroll={{ x: "1050px" }}
          pagination={{
            total: parseInt(total),
            pageSize: queryData.size,
            showQuickJumper: true,
            showTotal: this.showTotal,
            onChange: this.changePage,
            current: queryData.current,
          }}
          // scroll={{ y: '54vh', x: '60vw' }}
        />

        <RecordsModal onRef={ref => this.RecordsModal = ref} />
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(StaffList));
